<app-content-header
  [payment]="payment"
  [actionBgColor]="'#FFAE00'"
  (actionClick)="goManualPresent()">
  
  <ng-template #payment>
    <ng-container *ngIf="isShowMPresentBtn$ | async">
      <button  nzShape="round" (click)="goManualPresent()" class="cil__custom-btn__lightblue" nz-button>
        <i nz-icon type="dollar"></i> {{ 'TRADE.BATCH.PRESENTMENT' | translate }}
      </button>
    </ng-container>
  </ng-template>
</app-content-header>

<app-detail-header
  [title]="'TRADE.TITLE.DETAIL' | i18n"
  [ifEditable]="false"></app-detail-header>

<nz-spin *ngIf="loading"></nz-spin>

<div class="cil__info-item-blocks bottom-columns">
  <app-info-row
    [columns]="firstColumns"
    [height]="'160'"></app-info-row>
</div>

<div class="cil__info-item-blocks bottom-columns">
  <app-info-row
    [columns]="acquirerColumns"></app-info-row>
</div>

<div class="cil__info-item-blocks bottom-columns">
  <app-info-row
    [columns]="storeColumns"></app-info-row>
</div>
<ng-template #tpCurrency>
  <app-currency-select
    multiple
    required
    [(ngModel)]="detailData.currency"
    ></app-currency-select>
</ng-template>

<app-detail-header
  title="{{'TRADE.PRESENT.DETAIL' | translate}}"
  [ifEditable]="false"></app-detail-header>

<div class="cil__block" *ngIf="validateForm">
  <form class="cil__form" nz-form [formGroup]="validateForm" nzLayout="horizontal">

    <nz-form-item>
      <nz-form-label>{{'TRADE.PRESENT.AMT' | translate }}</nz-form-label>
      <nz-form-control nzHasFeedback="true">
        <input nz-input type="text" formControlName="txamt" name="txamt">
        <nz-form-explain *ngIf="validateForm.get('txamt').dirty">
          <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('txamt'), name:'txamt'}">
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label>{{ 'TRADE.PRESENT.DESCRI' | translate }}</nz-form-label>
      <nz-form-control nzHasFeedback>
        <textarea nz-input formControlName="refundDetail" name="refundDetail"></textarea>
        <nz-form-explain>
          <ng-container
            *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('refundDetail'), name:'refundDetail'}">
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nzJustify="center" nzAlign="middle" nzType="flex">
      <button
        acl [acl-ability]="'api.post.camel.trade.rfdp'"
        class="cil__custom-btn__lightblue"
        nz-button (click)="submitRefund()"
        nzType="default"
        nzShape="round">{{'BTN.SUBMIT' | i18n}}</button>
    </nz-form-item>
  </form>
</div>

<ng-template #errorTpl let-control="control" let-name="name">
  <ng-container *ngIf="control.dirty">
    <ng-container *ngIf="control.hasError('required'); else second">{{ errorTips[name]?.required }}</ng-container>
    <ng-template #second>
      <ng-container *ngIf="control.hasError('maxlength'); else third">{{ errorTips[name]?.maxlength }}</ng-container>
    </ng-template>
    <ng-template #third>
      <ng-container *ngIf="control.hasError('minlength'); else fourth">{{ errorTips[name]?.minlength }}</ng-container>
    </ng-template>
    <ng-template #fourth>
      <ng-container *ngIf="control.hasError('pattern'); else fifth">{{ errorTips[name]?.pattern }}</ng-container>
    </ng-template>
    <ng-template #fifth>
      <ng-container *ngIf="control.hasError('min'); else sixth">{{ errorTips[name]?.min }}</ng-container>
    </ng-template>
    <ng-template #sixth>
      <ng-container *ngIf="control.hasError('max'); else seventh">{{ errorTips[name]?.max }}</ng-container>
    </ng-template>
    <ng-template #seventh>
      <ng-container *ngIf="control.hasError('existCurrConvert');">{{ errorTips[name]?.existCurrConvert}}</ng-container>
    </ng-template>
  </ng-container>
</ng-template>
